import { useState } from "react";
import { FriendType } from "../../components/Member"
import Information from "./Information";

export default function Friender({member}: {
    member: FriendType;
}) {
    const [open, setOpen] = useState(false);

    return <>
        <div className="flex gap-4 p-4 items-center" onClick={() => setOpen(true)}>
            <div className="w-8 h-8 flex items-center justify-center bg-gray-100 shrink-0">
                <img src={member.avatar} alt="user avatar" className="w-full h-full rounded" />
            </div>
            <div className="line-clamp-1">
                {member.username}
            </div>
        </div>

        <Information open={open} onClose={() => setOpen(false)} member={member} />
    </>;
  }
